/* eslint-disable consistent-return */
import React from 'react';
import router from 'umi/router';
import { InboxOutlined } from '@ant-design/icons';
import { Card, Steps, Button, message, Upload } from 'antd';
import { urlParse, requestHeadersMd5 } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const { Step } = Steps;

const { Dragger } = Upload;

class UploadExcel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      suppId: null,
      suppFileData: null,
    };
  }

  componentDidMount() {
    const { location } = this.props;
    const suppId = urlParse(location.search).suppId ? urlParse(location.search).suppId : null;
    this.setState({ suppId });
  }

  // 文件上传
  changeUpload = info => {
    const { file } = info;
    if (file.status === 'done') {
      if (file.response.success) {
        this.setState({ suppFileData: file.response.data });
        message.success('文件上传成功！');
        return;
      }
      if (!file.response.success) {
        message.error('上传失败，请参照模板内容正确上传');
      }
    }
    if (file.status === 'error') {
      message.error('上传失败，服务端出错！');
    }
  };

  // 下一步
  onNext = () => {
    const { suppFileData, suppId } = this.state;
    window.localStorage.setItem('suppFileData', JSON.stringify({ ...suppFileData, suppId }));
    router.push('/salemanage/supplier/finish');
  };

  render() {
    const { suppId, suppFileData } = this.state;
    const DraggerProps = {
      action: '/csApi/invoice/upload',
      headers: requestHeadersMd5(),
      data: { suppId },
      beforeUpload: file => {
        const fileTye = [
          'application/vnd.ms-excel',
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          'xlsx',
        ];
        const isWord = fileTye.indexOf(file.type) > -1;
        if (!isWord) {
          message.error('文件格式错误，只能上传excel表格格式!');
          return false;
        }
      },
      onChange: this.changeUpload,
    };
    return (
      <PageHeaderWrapper>
        <Card style={{ padding: '0 25%' }}>
          <Steps current={0}>
            <Step title="上传增值税发票数据" />
            <Step title="完成" />
          </Steps>
          <div style={{ width: 480, minHeight: 200, margin: '0 auto', marginTop: 50 }}>
            <Dragger {...DraggerProps}>
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
            </Dragger>
          </div>
          <div style={{ marginTop: 50, marginBottom: 30, textAlign: 'center' }}>
            <Button type="primary" style={{ marginRight: 30 }} size="large">
              <a href="" download="增值税发票信息模板" style={{ textDecoration: 'none' }}>
                下载模板
              </a>
            </Button>
            <Button size="large" onClick={this.onNext} disabled={!suppFileData}>
              下一步
            </Button>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default UploadExcel;
